<template>
  <a-drawer placement="left" :closable="false" :visible.sync="show" @close="onClose" width="511px">
    <div class="drawer-content">
      <div class="content">
        <div class="title">
          <span>{{ title }}</span>
        </div>
        <div class="date">
          <div class="label">时间范围</div>
          <div class="box">
            <div class="btn-wrap">
              <div class="btn" :class="{ active: params.dateType === 2 }" @click="onDateClick(2)">
                今天
                <!-- <img src="./image/btn-wrap-angle.png" alt="" /> -->
              </div>
              <div class="btn" :class="{ active: params.dateType === 4 }" @click="onDateClick(4)">
                近一周
                <!-- <img src="./image/btn-wrap-angle.png" alt="" /> -->
              </div>
              <div class="btn" :class="{ active: params.dateType === 5 }" @click="onDateClick(5)">
                近一月
                <!-- <img src="./image/btn-wrap-angle.png" alt="" /> -->
              </div>
            </div>
            <div class="date-wrap">
              <a-range-picker
                @change="onDateChange"
                @calendarChange="calendarPriceRangeChange"
                separator="——"
                size="large"
                dropdownClassName="daping-range-date"
                :disabled-date="disabledDate"
              >
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </div>
          </div>
        </div>
        <div class="option-check">
          <!-- <div class="option-check-title"><span></span>统计指标</div> -->
          <GeminiScrollbar>
            <div class="option-list">
              <a-checkbox-group v-model="params.checkedList" @change="onCheckedChange" v-if="showDrag">
                <draggable v-model="dragOptionList" @end="onDragEnd">
                  <a-checkbox
                    v-for="(item, index) in dragOptionList"
                    :value="item.value"
                    :checked="item.checked"
                    :key="index"
                    >{{ item.label }}</a-checkbox
                  >
                </draggable>
              </a-checkbox-group>
            </div>
          </GeminiScrollbar>
        </div>
        <div class="btn-wrap">
          <div class="cancel" @click="onClose">取消</div>
          <div class="ok" @click="onOptionChange">确定</div>
        </div>
      </div>
      <div class="close" @click="onClose">
        <img src="../../image/index/left-sider-angle.png" />
      </div>
    </div>
  </a-drawer>
</template>

<script>
import draggable from 'vuedraggable'
import dragOtion from './config/options.js'
import moment from 'moment'
export default {
  components: {
    draggable,
  },
  model: {
    prop: 'visible',
    event: 'change',
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: String,
  },
  watch: {
    visible: function (res) {
      this.show = res
    },
  },
  data() {
    return {
      showDrag: true,
      show: false,
      // areaList: [],
      dragOptionList: [],
      params: {
        dateType: 2, // 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年
        startDate: '',
        endDate: '',
        checkedList: [],
      },
      // xzqhs: '吉林省长春市',  //默认行政区划
      selectPriceDate: '',
      offsetDays: 86400000 * 365, //最多选择365天【一年】
    }
  },
  computed: {},
  mounted() {
    this.getCheckedCache()
  },
  methods: {
    //选择开始时间/结束时间
    calendarPriceRangeChange(date) {
      this.selectPriceDate = date[0]
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate(current) {
      if (this.selectPriceDate) {
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - 1), 'YYYY-MM-DD')
        )
      } else {
        return false
      }
    },

    onDateClick(dateType) {
      this.params.dateType = dateType
    },
    onDateChange(date) {
      this.selectPriceDate = date[0]
      if (date.length > 0) {
        this.params.dateType = 0
        this.params.startDate = date[0].format('YYYY-MM-DD')
        this.params.endDate = date[1].format('YYYY-MM-DD')
      } else {
        this.params.dateType = 2
        this.params.startDate = ''
        this.params.endDate = ''
      }
      this.selectPriceDate = ''
    },
    onDragEnd() {
      // this.sortTop6()
      // this.setChecked()
      this.showDrag = false
      this.$nextTick(() => {
        this.showDrag = true
      })
    },
    sortTop6() {
      const top6 = this.dragOptionList.filter((item, index) => {
        return index < 6
      })
      const dragOptionList = JSON.parse(JSON.stringify(this.dragOptionList))
      top6.map((item, index) => {
        if (item.label === '告警类型概况') {
          if (index !== 0 || index !== 5) {
            if (top6[0].label !== '反走私情报数据概览') {
              dragOptionList.splice(index, 1)
              dragOptionList.unshift(item)
            } else if (top6[0].label === '反走私情报数据概览') {
              dragOptionList.splice(index, 1)
              dragOptionList.splice(5, 0, item)
            }
          }
        } else if (item.label === '反走私情报数据概览') {
          if (index !== 0 || index !== 5) {
            if (top6[0].label !== '告警类型概况') {
              dragOptionList.splice(index, 1)
              dragOptionList.unshift(item)
            } else if (top6[0].label === '告警类型概况') {
              dragOptionList.splice(index, 1)
              dragOptionList.splice(5, 0, item)
            }
          }
        }
      })
      this.dragOptionList = dragOptionList
    },
    onCheckedChange(item) {
      if (this.params.checkedList.length > 6) {
        this.params.checkedList.pop()
        this.$message.error('只能勾选六个指标生成图表')
      } else {
        this.sortDragList()
      }
    },
    sortDragList() {
      const checked = this.getChecked()
      const dragOptionList = JSON.parse(JSON.stringify(this.dragOptionList))
      let newList = []
      let sortList = []
      dragOptionList.map((item, index) => {
        checked.map((child) => {
          if (child === item.label) {
            newList.push(item)
          }
        })
      })
      // this.dragOptionList = newList.concat(sortList)
    },

    onOptionChange() {
      const checkedList = this.params.checkedList
      if (checkedList.length === 6) {
        const params = JSON.parse(JSON.stringify(this.params))
        params.checkedList = checkedList
        this.setCheckedCache()
        this.$emit('change', params)
        this.onClose()
      } else if (checkedList.length > 6) {
        this.$message.error('只能勾选六个指标生成图表')
      } else if (checkedList.length < 6) {
        this.$message.error('请勾选六个指标生成图表')
      }
    },
    setCheckedCache() {
      localStorage.setItem('dragOtion', JSON.stringify(this.dragOptionList))
      localStorage.setItem('checkedList', JSON.stringify(this.params.checkedList))
    },
    getCheckedCache() {
      const dragOtionCache = localStorage.getItem('dragOtion')
      const checkedListCache = localStorage.getItem('checkedList')
      if (dragOtionCache && checkedListCache) {
        this.dragOptionList = JSON.parse(dragOtionCache)
        this.params.checkedList = JSON.parse(checkedListCache)
      } else {
        this.dragOptionList = dragOtion
        this.setChecked()
      }
    },
    setChecked() {
      let checked = []
      this.dragOptionList.map((item, index) => {
        if (index < 6) {
          checked.push(item.value)
        }
      })
      this.params.checkedList = checked
    },
    getChecked() {
      // return this.dragOptionList.filter((item, index) => {
      //   return index < 6
      // })
      return this.params.checkedList
    },
    getOption() {
      const params = JSON.parse(JSON.stringify(this.params))
      // let xzqh = params.xzqh
      // let xzqhs = this.xzqhs + xzqh
      // params.xzqh = xzqhs
      params.checkedList = this.params.checkedList
      return params
    },
    onClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'pang';
  src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
}

.ant-drawer {
  z-index: 9;

  ::v-deep .ant-drawer-content {
    background-color: transparent;
  }

  ::v-deep .ant-drawer-body {
    height: 100%;
    padding-top: 10.185vh;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;

    .drawer-content {
      height: 100%;
      // background-color: pink;
      display: flex;
      flex-flow: row;
      align-items: center;

      .content {
        width: 483px;
        height: 100%;
        background-image: url(image/drawer-bg.png);
        background-size: 100% 100%;
        display: flex;
        flex-flow: column;
        // border: 1px solid #fff;
        // background-color: rgba(7, 38, 46, .9);
        color: #fff;
        .gm-scrollbar-container {
           width: 98%;
        }

        .gm-scrollbar.-vertical {
          width: 15px;
          background-color: rgba(0, 32, 62, 1);
        }

        /* horizontal scrollbar track */
        .gm-scrollbar.-horizontal {
          background-color: transparent;
        }

        /* scrollbar thumb */
        .gm-scrollbar .thumb {
          background-color: rgba(0, 136, 178, 0.6);
        }
        .gm-scrollbar .thumb:hover {
          background-color: rgba(0, 136, 178, 1);
        }

        // ::-webkit-scrollbar {
        //   width: 15px;
        // }

        // ::-webkit-scrollbar-thumb {
        //   background-color: rgba(2, 134, 169, 1.0);
        // }

        // ::-webkit-scrollbar-track-piece {
        //   background-color: rgba(6, 31, 39, 1.0);
        // }

        .title {
          font-family: 'pang';
          width: 441px;
          height: 41px;
          margin: 0 auto;
          margin-top: 24px;
          background-image: url(../image/title.png);
          background-size: 100% 100%;
          position: relative;
          color: #fff;

          span {
            position: absolute;
            left: 40px;
            top: 8px;
            font-size: 20px;
          }
        }

        .date,
        .area {
          padding-left: 20px;
          font-size: 14px;
          display: flex;
          flex-flow: row;
          margin-top: 20px;

          .label {
            margin-right: 23px;
            word-break: keep-all;
          }

          .box {
            flex: 1;
            padding-right: 20px;

            .btn-wrap {
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;
              height: unset;
              color: #00aeff;

              .btn {
                width: 100px;
                height: 40px;
                background-image: url(./image/btn-wrap.png);
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                cursor: pointer;
                border: 0;

                img {
                  position: absolute;
                  bottom: 0;
                  opacity: 0.4;
                }
              }

              .active {
                background-image: url(./image/btn-wrap-active.png);
                color: #fff;
              }
            }

            .date-wrap {
              width: 360px;
              // background-color: rgba(0, 203, 255, .2);
              background-image: url(image/date-wrap.png);
              background-size: 100% 100%;

              .ant-calendar-range-picker-input {
                &::placeholder {
                  color: #00aeff;
                }
              }

              .ant-calendar-picker-icon {
                color: #00aeff !important;
              }

              .ant-calendar-picker {
                width: 100%;
              }

              .ant-calendar-range-picker-separator {
                color: #00aeff;
              }

              .ant-input {
                background-color: transparent;
                border: 0;
                color: #fff;
              }

              .ant-calendar-picker-icon {
                color: #fff;
              }
            }

            .city-wrap,
            .area-wrap {
              width: 160px;
              height: 40px;
              background-image: url(./image/select-wrap.png);
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }

        // .date{
        //   height: 140px;
        // }
        .area {
          height: 40px;

          .box {
            display: flex;
            justify-content: space-between;
          }
        }

        .btn-wrap {
          height: 80px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: #fff;

          > div {
            width: 80px;
            height: 40px;
            border: 1px solid #00aeff;
            text-align: center;
            line-height: 40px;
            margin-right: 30px;
            cursor: pointer;

            &:active {
              opacity: 0.7;
            }
          }

          .ok {
            background: rgba(0, 174, 255, 0.5);
          }
        }

        .option-check {
          margin-top: 32px;
          overflow-y: hidden;
          // height: calc(100% - 40px - 100px - 31px - 64px - 32px);
          flex: 1;

          .option-check-title {
            font-family: 'pang';
            padding-left: 20px;
            display: flex;
            align-items: center;
            font-size: 20px;
            margin-bottom: 14px;

            span {
              display: inline-block;
              width: 4px;
              height: 20px;
              background-color: #00aeff;
              margin-right: 10px;
            }
          }

          .option-list {
            height: calc(100% - 14px - 30px);
            // overflow-y: auto;
            padding-left: 20px;

            .ant-checkbox-group {
              width: 100%;
              > div {
                padding-bottom: 50px;
              }
              .ant-checkbox-wrapper {
                height: 50px;
                border-bottom: 1px solid rgba(0, 174, 255, 0.3);
                color: #fff;
                display: flex;
                align-items: center;
                margin-left: 0;

                // &:first-child {
                //   border-top: 1px solid rgba(0, 174, 255, 0.3);
                // }
                &:last-child {
                  border-bottom: 0;
                }

                .ant-checkbox-checked .ant-checkbox-inner {
                  background-color: rgba(0, 121, 239, 1);
                }

                .ant-checkbox-inner {
                  background-color: rgba(0, 174, 255, 0.2);
                  border: 1px solid rgba(0, 121, 230, 1);

                  &::after {
                    border-color: #fff;
                  }
                }
              }
            }
          }
        }
      }

      .close {
        flex: 1;
        height: 450px;
        background-image: url(../../image/index/left-sider.png);
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 40px;
        cursor: pointer;

        img {
          transform: rotate(180deg);
        }
      }
    }
  }
}

// #area-dropdown {
//   background-color: transparent;
//   border: 1px solid #00AEFF;

//   ::v-deep .ant-dropdown-menu-item {
//     color: #fff;

//     &:hover {
//       background-color: rgba(0, 203, 255, .4) !important;
//     }
//   }
// }
</style>
<style lang="less">
.area-select-dropdown {
  background-color: #040c1f;

  li {
    color: #fff;

    &:hover {
      color: #333;
    }
  }

  .ant-select-dropdown-menu-item-selected {
    background-color: #00aeff;
  }
}

#area-select {
  .ant-select-selection {
    width: 100%;
    background-color: transparent;
    border: 0;
    color: #fff;
    box-shadow: unset !important;

    .ant-select-arrow {
      background-image: url(./image/select-down-icon.png);
      background-size: 100% 100%;
      width: 23px;
      height: 12px;

      i {
        display: none;
      }
    }
  }
}

.daping-range-date {
  border: 1px solid #006ba3;
  background: rgba(0, 42, 78, 0.9);
  // background-color: rgba(0, 20, 26, .9);
  box-shadow: 0 0 5px #006ba3;
  top: 280px !important;

  // border-radius: 4px;
  .ant-calendar-input-wrap {
    display: none;
  }

  .ant-calendar-date {
    color: #fff;
  }

  .ant-calendar {
    background-color: transparent;
    margin: 0;
    border: 0;
  }

  .ant-calendar-next-month-btn-day {
    .ant-calendar-date {
      color: rgba(255, 255, 255, 0.3) !important;
    }
  }

  .ant-calendar-column-header {
    color: #fff;
  }

  .ant-calendar-input {
    background-color: transparent !important;
    border: 0 !important;
  }

  .ant-calendar-year-select,
  .ant-calendar-month-select {
    color: #fff !important;
  }

  .ant-calendar-next-year-btn,
  .ant-calendar-next-month-btn {
    &:hover {
      &::before,
      &::after {
        border-color: #fff !important;
      }
    }
  }

  .ant-calendar-month-panel-header,
  .ant-calendar-month-panel-body,
  .ant-calendar-year-panel-header,
  .ant-calendar-year-panel-body {
    background-color: rgba(0, 20, 26, 0.9);
  }

  .ant-calendar-disabled-cell .ant-calendar-date {
    background-color: #eee;
    color: #ccc !important;
  }

  .ant-calendar-month-panel-year-select-content,
  .ant-calendar-year-panel-decade-select-content,
  .ant-calendar-month-panel-month,
  .ant-calendar-year-panel-year {
    color: #fff;
  }

  .ant-calendar-in-range-cell {
    background-color: rgba(0, 67, 128, 0.4) !important;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    margin: 1px 0;

    &::before {
      background-color: unset !important;
    }
  }

  .ant-calendar-selected-start-date {
    background-color: #007ff6;
    border-radius: 45% 0 0 45%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;

    .ant-calendar-date {
      border-radius: 45% 0 0 45%;
    }
  }

  .ant-calendar-selected-end-date {
    background-color: #1890ff;
    border-radius: 0 45% 45% 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;

    .ant-calendar-date {
      border-radius: 0 45% 45% 0;
    }
  }
  .ant-calendar-picker-clear {
    background: transparent;
    color: #1890ff;
  }

  .ant-calendar-cell {
    .ant-calendar-date {
      &:hover {
        color: #000;
      }
    }
  }

  .ant-calendar-range-part {
    padding: 0 30px;
  }

  .ant-calendar-range-left {
    padding-right: 22px !important;
  }

  .ant-calendar-range-right {
    padding-left: 22px !important;
  }

  .ant-calendar-prev-year-btn {
    left: -25px;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-prev-month-btn {
    left: 0;
    color: #fff;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-next-year-btn {
    right: -25px;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-next-month-btn {
    right: 0;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }
}
</style>
